<template>
  <div class="echart-part">
    <div class="echart-title">
      {{para.title}}
    </div>
    <div class="echart_content" :id="para.id"></div>
  </div>
</template>
<script>
  import { formatType } from '../../../libs/util'

  const echarts = require('echarts')
  import statService from '@/api/stat/stat'
  let seriesTop = 70
  let option = {
    color: ['rgba(28,255,252,1)', 'rgba(255,113,48,1)'],
    barGap: 2,
    legend: {
      orient: 'horizontal',
      left: 'center',
      textStyle: {
        fontSize: 12,
        color: 'white'
      }
    },
    grid: {
      top: "10%",
      left: "15%",
      right: "15%",
      bottom: "10%",
      show: false, // 显示边框
    },
    xAxis: {
      type: 'value',
      splitLine: {
        show: false,
        lineStyle: {
          color: 'rgba(27,56,63,1)', // 分割线颜色
          type: 'dashed',
          width: 1.5
        }
      },
      axisTick: {show: false},
      axisLine: {show: false},
      axisLabel: {
        show:false

      }
    },
    yAxis: [
      {
        type: 'category',
        inverse: true,
        axisLine: {show: false},
        axisTick: {
          show: false // 去除刻度线
        },
        axisLabel: {
          formatter:(params,i)=>{
            return '{bg|'+(i+1)+'}'
          },
          margin:24,
          rich:{
            bg:{
              color:'#78C7EC',
              borderColor: '#254F93',
              display:'inline-block',
              align:'center',
              width:18,
              height:16,
              borderRadius:9,
              borderWidth: 1,
              padding:[2,0,0,0]
            }
          }
        },
        splitLine: {
          show: false
        }
      },
      {
        type: 'category',
        inverse: true,
        position:'right',
        axisLine: {show: false},
        axisTick: {
          show: false // 去除刻度线
        },
        axisLabel: {
          formatter:(params,i)=>{
            return '{bg|'+i+'}'
          },
          margin:24,
          rich:{
            bg:{
              color:'#78C7EC',
              // borderColor: '#254F93',
              display:'inline-block',
              align:'center',
              width:18,
              height:16,
              // borderRadius:9,
              // borderWidth: 1,
              padding:[2,0,0,0]
            }
          }
        },
        splitLine: {
          show: false
        }
      }
    ],
    series: {
      name: '',
      type: 'bar',
      top: seriesTop,
      barMinHeight: 2,
      showBackground: true,
      barWidth: 16,
      barMinWidth:16,
      itemStyle: {
        borderRadius: [8, 8, 8, 8],
        color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
          {offset: 0, color: 'rgba(55,143,221,1)'},
          {offset: 1, color: 'rgba(24,58,90,0.45)'}
        ])
      },
      backgroundStyle: {
        color: '#063C49',
        borderRadius: [8, 8, 8, 8],
        borderWidth: 1,
        borderColor: '#067884'
      },
      avoidLabelOverlap: false,
      emphasis: {
        label: {
          show: true,
          fontSize: '14',
          fontWeight: 'bold'
        }
      },
      label:{
        show:true,
        formatter:'{b}:{c}',
        position:'top left',
        offset:[0,-18],
        fontSize:14,
        color:'#78C7EC'
      },
      data: [],

    }
  }
  let myChart
  export default {
    name: 'mail-direct-data',
    components: {},
    props: {
      para: {}
    },
    data () {
      return {
        option: option,
        reload: false,
        new: [],
        echartData: [],
        legend: [],
        curNetName: 'test',
        timer: ''
      }
    },
    mounted () {
      this.getData()
    },
    beforeDestroy () {
      if (this.timer) { //如果定时器还在运行 或者直接关闭，不用判断
        clearInterval(this.timer) //关闭
      }
    },
    watch: {
      reload (value) {
        if (value) {
          let valueArr= _.map(this.echartData, 'value')
          this.option.series.data =valueArr
          let xnameArr = _.map(this.echartData, 'name')
          this.option.yAxis[0].data = xnameArr
          this.option.yAxis[1].data = xnameArr
          let percentArr=[]
          let valueCount=valueArr.reduce((acc,cur)=>{return Number(acc)+Number(cur)},0)
          _.forEach(valueArr,function (v,i) {
            let percentItem
            if(valueCount>0){
              percentItem=((v/valueCount)*100).toFixed(0)+'%'
            }else {
              percentItem=0
            }
              percentArr.push(percentItem)
          })
          this.option.yAxis[1].axisLabel.formatter= (params,i)=>{
            return '{bg|'+percentArr[i]+'}'
          }

          this.draw()
        } else {
          return
        }
      }
    },
    methods: {
      getData () {
        let echartDataIn=[{
          name: 'test1',
          value: 10
        },{
          name: 'test2',
          value: 10
        }]
        let echartDataOut=[{
          name: 'test3',
          value: 10
        },{
          name: 'test4',
          value: 10
        }]
        this.echartData = [...echartDataIn, ...echartDataOut]
      },
      draw () {
        let div = document.getElementById(this.para.id)
        if (!myChart || !div.innerHTML) {
          myChart = echarts.init(document.getElementById(this.para.id))
        }
        myChart.setOption(this.option)
        window.addEventListener('resize', () => myChart.resize(), false)
      }
    }
  }
</script>

<style scoped>

  .echart_content {
    /*background: url("../../../assets/images/large-screen/kuangwang.svg") no-repeat;*/
    background-size: 100% 100%;
    background-color: rgba(7, 23, 30, 0.5);

  }

  .echart-title {
    display: flex;
    align-items: center;
    padding-left: 0.6rem;
    height: 0.5rem;
    background: url("../../../assets/images/large-screen/neirong_ng.svg") no-repeat;
    background-size: 100%;
  }

  .echart-title .title_1:before {
    content: url("../../../assets/images/large-screen/juxing.svg");
    position: absolute;
    left: 0.3rem;
    top: auto;
  }
  /*.echart-title .title_1{*/
  /*  display: flex;*/
  /*  flex-basis: 300px;*/
  /*  height: 100%;*/
  /*  padding-left: 0.6rem;*/
  /*  flex-direction: row;*/
  /*  align-items: center;*/
  /*  background: url("../../../assets/images/large-screen/title_1.png") no-repeat;*/
  /*  background-size: 100%;*/
  /*}*/
  /*.echart-title .title_2{*/
  /*  height: 68%;*/
  /*  flex-grow: 1;*/
  /*  align-self: end;*/
  /*  background: url("../../../assets/images/large-screen/title_2.png") bottom repeat-x,linear-gradient(90deg, transparent, green) ;*/
  /*}*/
</style>
